<script setup lang="ts">
import {getMessageDetails} from "@/api/home/index";
import {useRouter} from "vue-router";
import router from "@/router";
import {ref} from "vue"


// const route = useRouter()
// const messageId = route.query.messageId
// router.currentRoute.value.query.messageId
const messageId = router.currentRoute.value.query.messageId
// console.log(messageId)
let data = ref()
getMessageDetails(messageId).then((item)=>{
    console.log(item)
    if(item.code == 200){
        data.value = item.data
    }
})
</script>

<template>
    <div class="box">
        <p>
            <router-link to="/personalMessage">
                <van-icon name="arrow-left" class="toleft"/>
            </router-link>
            <span>{{data.title}}</span>
        </p>
        <div class="section">
            {{data.content}}
            <div style="margin-top: 30px;margin-left: 50vw;text-align: right;color: #C1C0C7;font-size: 14px">
                {{data.sendTime}}
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
  min-height: 100vh;
  background-color: #F8F8F8;

  p {
    //margin-left: 10px;
    padding: 20px 15px;
    margin-bottom: 10px;
    position: relative;
    background-color: white;
  }
    .section{
        margin: 10px auto;
        padding: 15px 10px ;
        //position: relative;
        width: 95%;
        min-height: 90vh;
        background-color: white;
        border-radius: 8px;
    }
}
</style>